<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/23
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>更换密码</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="/layui-v2.9.0/layui/layui.js"></script>
  <!-- 引入 jquery -->
  <!--    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>-->
  <!--    &lt;!&ndash; 引入 distpicker &ndash;&gt;-->
  <!--    <script src="https://cdn.jsdelivr.net/npm/distpicker/dist/distpicker.min.js"></script>-->
  <style>
    #header{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
    #sidebar{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 50px; /* 留出头部导航的高度 */
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100%;
      padding: 10px;
      margin-top: 30px;
    }
    #content {


      margin-top: 100px;
      width:51%;
      border: 1px solid gold;

    }
    #userHead{
      border-radius: 50%!important;
      overflow: hidden;
      width: 15%;
      height: 15%;
    }
    .container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      z-index: 10;
      border: none;
      /*padding: 10px;*/

    }
    .layui-nav *{
      font-size: 20px;
    }
    .layui-nav-tree.layui-nav-side{
      position: relative;
      margin-top: 10px;
    }
  </style>

</head>
<body>

<!--水平导航-->
<div id="header" class="layui-form layui-col-xs12 layui-bg-gray">
  <div class="container layui-header">
    <ul class="layui-nav layui-layout-left  layui-bg-gray" >
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-hide-xs">
        <img style="width: 40px;height: 40px; padding: 10px" src="/img/热趣部落.png" alt="图片">
      </li>
      <li class="layui-nav-item layui-hide-xs">
        <input type="text" placeholder="" class="layui-input">
        <div class="layui-input-split" style="cursor: pointer;">
          <i class="layui-icon layui-icon-search"></i>
        </div>

      </li>
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item "><a href="/forward/indexPage">首页</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserIndexPage">个人中心</a></li>
      <li class="layui-nav-item "><a href="/forward/forwardUserSettingPage">账号设置</a></li>
      </li>
    </ul>
  </div>
</div>
<!--垂直导航-->
<div id="sidebar" class="layui-col-xs3 layui-col-xs-offset1">
  <ul  class="layui-nav layui-nav-tree layui-nav-side layui-bg-gray">
        <span class="layui-nav-item" style="padding-left: 10px">
             <h3>设置</h3>
        </span>
    <li class="layui-nav-item">
      <a  href="/forward/forwardUserSettingPage">
        <i class="layui-icon layui-icon-home">  编辑资料</i>
      </a>
    </li>
    <li class="layui-nav-item">
      <a>
        <i class="layui-icon layui-icon-user">  账号安全</i>
      </a>
      <dl class="layui-nav-child">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-email"></i>
          </div>
          <dd style="margin-left: 10px"><a href="/forward/forwardUserEmailPage">更改邮箱</a></dd>
        </div>
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <dd style="margin-left: 10px"><a href="/forward/forwardUserPasswordPage">更改密码</a></dd>
        </div>
      </dl>
    </li>
    <li class="layui-nav-item">
      <a href="/forward/forwardUserAccusionPage"> <i class="layui-icon layui-icon-friends">   账号投诉</i></a>
    </li>
  </ul>
</div>
<form class="layui-form" action="">
  <div id="content" class="layui-col-xs-offset3">
    <h2 style="text-align: center">举报</h2>
    <!--        举报的用户名称-->
    <div class="layui-form-item" style="margin-top: 20px">
      <lable class="layui-form-label">用户名称</lable>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" id="accusationUser" lay-verify lay-reqtext="请输入用户名称" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item" style="margin-top: 20px">
      <lable class="layui-form-label">举报理由</lable>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <select name="quiz" lay-verify="required" lay-reqtext="请选择举报理由">
            <option value="">请选择问题</option>
            <optgroup label="">
              <option value="低俗色情">低俗色情</option>
              <option value="引人不适">引人不适</option>
              <option value="诱导互动">诱导互动</option>
              <option value="攻击他人">攻击他人</option>
              <option value="违反社会功德">违反社会功德</option>
              <option value="广告引流">广告引流</option>
              <option value="政治敏感">政治敏感</option>
              <option value="疑似自杀/自残">疑似自杀/自残</option>
              <option value="造谣传谣">造谣传谣</option>
              <option value="违规卖货">违规卖货</option>
              <option value="其他">其他</option>
            </optgroup>
            <optgroup label="内容违规注释">
              <option value="价值观导向不正">价值观导向不正</option>
              <option value="未成年危险行为">未成年危险行为</option>
              <option value="侵害未成年">侵害未成年</option>
            </optgroup>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <div class="layui-input-inline layui-input-wrap" >
        <button type="submit" style="margin-left: 110px"class="layui-btn layui-btn-primary layui-border-green" lay-submit lay-filter="demo-reg">确定</button>
      </div>
      <div class="layui-input-inline layui-input-wrap">
        <button type="button" style="margin-left: 20px"  class="layui-btn layui-btn-primary layui-border-green">
          <a style="color:#16baaa" href="accusation.html">取消</a>
        </button>

      </div>
    </div>
  </div>
</form>
<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    // 自定义验证规则

    // 提交事件
    form.on('submit(demo-reg)', function(data){
      var field = data.field; // 获取表单字段值
      // 显示填写结果，仅作演示用

      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });

      // 此处可执行 Ajax 等操作
      // …

      return false; // 阻止默认 form 跳转
    });

  });
</script>
</body>
</html>
